<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<style>
table{
border-collapse: collapse;
}

thead>tr{
border-bottom:2px solid #B7D1FB ;
}

tbody>tr{
border-bottom:1px solid #B7D1FB; 
}

th,
td{
padding: 12px;
}

a{
text-decoration: none;
}
</style>

</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox"  id="allab" onclick="SelectAll()"/>
<label for="allcb">全选</label>
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<!-- 这里空了 -->
 <tr>
	<!-- <td id="order" colspan="6" style="text-align: right;">
		<span>已经选择16件商品总计</span>
		<span style="color: red; font-size: 22px;">731.40</span>
	<a href="#" style="border-radius: 4px;
	padding:8px;
	background:#F08B34;color:#fff">提交订单</a>
	</td> -->
</tr> 

</table>

<script>
var data=[{
	// id:0,
	// choose:false;//选中和未被选中 重复性
	
name:'javaScript实战',
price:47.8,
num:1
},
{
name:'javaScript实战2代',
price:47.8,
num:2
},
{
name:'javaScript实战3代',
price:47.8,
num:3
},
];

var tdbody=document.querySelector('table').lastElementChild;
//处理数据
function dealData(){
	//<object.assign 多个对象合并
	// data.forEach()
	data.map((x,i)=>Object.assign(x,{id:i,choose:false}))
	// console.log(data);
	
}dealData();
function init(){
	//这里删除无问题 但总计没了 加了tr后就有了
	tdbody.innerHTML=`
	<tr>
		<td id="order" colspan="6" style="text-align: right;">
			<span>已经选择16件商品总计</span>
			<span style="color: red; font-size: 22px;">731.40</span>
		<a href="#" style="border-radius: 4px;
		padding:8px;
		background:#F08B34;color:#fff">提交订单</a>
		</td>
	</tr>
	`;
	
	 data.forEach(o=>appendGood(o));
}init();

function delGood(i){//删除
	//filter过滤方法 0和 2 3 符合条件 1不行
	data=data.filter(o=>o.id!=i)
	init();
	
	// console.log(data);
	
}
function plus(i){
	// data.forEach(o=>o.id==i ? o.num++:false)
	 data.forEach(o=>o.id==i ? o.num++:'')
	init();
	
	// console.log(i);
	// // data.forEach(o=>{
	// // 	if(o.id==i){
	// // 		o.num++;
	// // 	}
	// // })
	// // init();
}

function minus(i){
	data.forEach(o=>o.id==i&&o.num>0 ? o.num--:false)
	init();
	// console.log(i);
}






// var tdbody=document.querySelector('table').lastElementChild;
// console.log(tdbody)
console.log(tdbody.childNodes)

function appendGood(Obj){
	var tr=document.createElement('tr');
	
	var sum=(Obj.num*Obj.price).toFixed(2);//保留2位小数
	tr.innerHTML=`
	<td>
	<input onclick="choose()" type="checkbox" name="c"/>
	</td>

	<td>${Obj.name}</td>
	<td>${Obj.price}</td>
	
	<td>
	<button onclick="minus(${Obj.id})">-</button>
	<span>${Obj.num}</span>
	<button onclick="plus(${Obj.id})">+</button>
	</td>
	
	<td style="color: red;">${sum}</td>
	<td>
	<a href="#" onclick="delGood(${Obj.id})">删除</a>
	</td>
	`;
	tdbody.insertBefore(tr,tdbody.lastElementChild);
	// console.log(tr);
	// }appendGood(data[1]);
	};
	//forEach（） 循环 每个都自己跑一遍 
	// data.forEach(o=>appendGood(o));
	


</script>
</body>
</html>